<template>
    <div class="sms-container">
        <el-form ref="smsLoginForm" :model="smsFormData" status-icon :rules="smsRules" label-width="120px"
            class="demo-smsFormData">
            <!-- 手机号 -->
            <el-form-item label="手机号" prop="phone" class="c-form-item">
                <el-input v-model="smsFormData.phone" maxlength="11" />
                <span @click="sendSms" class="code">{{ desc }}</span>
            </el-form-item>
            <el-form-item class="u-form-item">
            </el-form-item>

            <!--  输入验证码 -->

            <el-form-item label="验证码 " prop="code" class="u-form-item">
                <el-input v-model="smsFormData.code" type="text" autocomplete="off" maxlength="5" />
            </el-form-item>
            <el-form-item class="u-form-item">
                <el-button type="primary" @click="submitForm(smsLoginForm)">登入</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 引入接口
import * as api from "@/api/users.js"

// 业务
// 1.修改表单注入的数据以及prop
// 


import { reactive, ref, onUnmounted } from 'vue'
// 引入校验函数
import { smsRules, useSubmitForm } from "../../composition/login/validate"

// 引入路由对象
import {useRouter} from "vue-router"
let router = useRouter() 

// 表单校验成功之后回调的方法
let validateSuccess = async () => {
    console.log('校验成功');

    // 发送短信登录的请求
    try {
        let res = await api.smsApi(smsFormData.code)
        console.log(res);
        //   页面要跳转
        router.push("/")
    }catch(e){
        console.log(e);
    }
}

// 表单校验失败之后回调的方法
let validateFailed = () => {
    console.log('校验失败');
}

// 使用useSubmitForm
let submitForm = useSubmitForm(validateSuccess, validateFailed)
const smsLoginForm = ref()
// 注入到表单的数据
const smsFormData = reactive({
    phone: '',
    code: '',

})

// 短信登录又称
// 1.输入手机号，点击发送按钮，获取短信验证码

// 短信验证码需要倒计时提示

// 手机验证码同一个手机，一分钟只能发送一次，一天一个手机号只能发6次

// 2.输入短信验证码，进行登录请求

// 声明一个响应式变量，改变按钮中间的文字

let desc = ref('点击发送')
// 引用定时器，便于组件卸载的时候，清除定时器
let timeDownInterval = null
// 处理用户频繁点击的问题
// 应用开关的思路
// 初始值用户未点击
let isClick = false
let sendSms = async () => {
    if (!isClick) {
        // 调用倒计时函数
        timeDownInterval = timeDown(3, desc, '秒后发送', desc.value, () => {
            // 让点击状态isClick恢复到未点击
            isClick = false
        })

        // 发起获取短信验证码请求
        try {
            let res = await api.getSmsCode(smsFormData.phone)
            // console.log(res);
            // 进行
        } catch (e) {
            console.log(e);

        }
    }
    // 标记isClick已经被点击了
    isClick = true
}
// 短信倒计时的方法
/**
 * 
 * @param {Number} timer 倒计时的时间
 * @param {Object} param 需要变更的响应式变量
 * @param {String} msg   倒计时秒数的文字
 * @param {String} endMsg 倒计时结束之后回写的文字
 * @param {Function} cb   倒计时结束之后回调的函数
 */

//  封装的思路，目的就是为了让使用变得更简单

//字符串.padStart('希望几位数','用什么字符去补')

let timeDown = (timer = 5, param, msg, endMsg, cb) => {
    // 实现思路，核心就是间隔定时器
    let count = timer
    // 一调用倒计时函数，就要显示倒计时的秒数
    param.value = (count + "").padStart(2, 0) + msg
    let interval = setInterval(() => {
        count--
        // console.log(99999);

        if (count <= 0) {
            // 清楚定时器
            clearInterval(interval)
            // 倒计时结束
            param.value = endMsg
            // 回调传入的函数
            cb && cb()
            return
        }
        param.value = (count + "").padStart(2, 0) + msg
    }, 1000)
    // 返回定时器的引用
    return interval
}
// 组件卸载的钩子
onUnmounted(() => {
    // 卸载定时器
    console.log('组件被卸载了');
    // 如果定时器存在，组件卸载的时候也需要清除定时器
    if (timeDownInterval) clearInterval(timeDownInterval)
})
</script>

<style lang="scss" scoped>
.u-form-item {
    color: white !important;

    .el-input {
        width: 200px !important;
    }

    .el-button {
        width: 200px !important;

    }

    :deep(.el-form-item__label) {
        color: white
    }

    a {

        margin: 10px 0 0 55px;
    }


}

.c-form-item {
    .el-input {
        width: 130px !important;

    }

    :deep(.el-input__wrapper) {
        border-radius: 4px 0 0 4px;
    }

    :deep(.el-form-item__label) {
        color: white
    }

    .code {
        width: 70px;
        height: 32px;
        // border: 1px solid;
        background-color: white;
        border-radius: 0 4px 4px 0;
        font-size: 10px;
        text-decoration: underline;
    }

    :deep(.el-input__wrapper) {
        box-shadow: none;
    }
}

.loginOline {
    width: 400px;
    height: 550px;
    background-color: rgba(0, 0, 0, .3);
    position: fixed;
    right: 10%;
    top: 25%;


    h1 {
        padding: 90px 0 20px 0;
        text-align: center;
        color: white;
    }



}

.app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
